<template>
    <div class="edit page">
      <header>
        <div class="header-img">
        </div>
      </header>
      <div class="vh-center">
        <router-link to="/dev">
          <img class="eidt-top-img" src="../../assets/back.png">
        </router-link>
          <img class="eidt-top-img" width="30" height="30" src="../../assets/edit_finish.png" @click = "commit">
        </div>
        <div class="edit-right vh-center">
          <div class="edit-area">
            <div class="title">
              <input v-model="title" placeholder="标题">
            </div>
            <div class="tag">
              <input v-model="tag" placeholder="标签">
            </div>
            <div class="brief">
              <input v-model="brief" placeholder="简介">
            </div>
            <simditor :id="id" :options="options" @change="change">
            </simditor>

            <span class="commit" @click = "commit">
              完成
            </span>
            <span class="reset">重置</span>
          </div>
        </div>
    </div>
</template>
<script>
import ArticleApi from './model/api';
import simditor from '../../components/simditor/simditor';
export default {
  name: 'Edit',
  data () {
    return {
      id: 'simditor',
      title: '',
      tag: '',
      brief: '',
      content: '',
      md_content: '',
      article_info: {},
      options: {
        placeHolder: 'this is placeHolder',
        toolbarFloat: true,
        toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment',
        ],
        pasteImage: true,
        upload: {
          url: `http://...`,
          params: null,
          fileKey: 'file',
          connectionCount: 3,
          leaveConfirm: '正在上传文件',
        },

      },
    };
  },
  components: {
    simditor,
  },
  methods: {
    async commit () {
      this.$set(this.article_info, 'title', this.title);
      this.$set(this.article_info, 'author', 'xucaiyun');
      this.$set(this.article_info, 'tag', this.tag);
      this.$set(this.article_info, 'cover', 'https://gw.alicdn.com/tfs/TB15lFuuGmWBuNjy1XaXXXCbXXa-900-500.jpg');
      this.$set(this.article_info, 'brief', this.brief);
      this.$set(this.article_info, 'content', this.content);
      this.$set(this.article_info, 'md_content', this.md_content);
      await ArticleApi.addArticle(this.article_info);
      alert('保存成功');
      this.$router.push(`/dev`);
    },
    change (val) {
      this.md_content = val;
      this.content = val;
    },
  },
};
</script>
<style src="./style.scss" lang="scss" scoped></style>
